<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云上边框</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./common.css">
    <style>
        .top {
            height: 70px;
            background-color:#333;
            box-sizing: border-box;
            border: 1px solid #000;
        }

        .top .topbar {
            display: flex;
            justify-content: center;
            line-height: 69px;
            height: 69px;
            background-color: 333;
           
        }

        

        .left a{
            display: inline-block;
            color: #f5f5f5;
            font-size: 14px;
            margin-left: 10px;
            margin-right: 15px;
        }

        .logo h1 a {
            text-indent: -999px;
            display: block;
        }

        .logo h1 a {
            background-image: url(../image/网易精灵图.png);
            width: 157px;
            padding-right: 20px;
        }

        .left {
            display: flex;
            justify-content: space-between;
        }

        .right {
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .right a {
            color: #f5f5f5;
            font-size: 12px;
        }

        .right-item {
            margin-right: 30px;
        }

        .right .search .input {
            width: 158px;
            height: 32px;
            box-sizing: border-box;
            border: 1px solid #999;
            border-radius: 32px;
            background-color: #f5f5f5;
            font-size: 12px;
            padding-left: 30px;
            outline: none;
        }

        .search {
            position: relative;
        }

        .search img {
            position: absolute;
            width: 18px;
            height: 18px;
            left: 5px;
            top: 27px;
        }


        .right .author a {
            display: inline-block;
            text-align: center;
            width: 90px;
            height: 32px;
            line-height: 32px;
            border: #999 1px solid;
            border-radius: 32px;
        }

        .login a {
            color: #999;
        }

        .login a:hover {
            text-decoration: underline #000;
        }

        /* hover事件 */
        
        .topbar .left a:hover
        {
            background-color: #000;
            color: #fff;
        }

        .left .logo a:hover
        {
            background-color: #333;
        }

        .active
        {
             background-color: #000;
            color: #fff;
        }

        /* 导航栏css样式 */
       
        .nav
        {
            height: 35px;
            background-color: red;
            box-sizing: border-box;
            border-bottom: 1px solid #000;
        }

        .nav .content
        {
            display: flex;
            
            margin-left: 420px;
            width: 564px;
            height: 34px;
            line-height: 34px;
            font-size: 12px;
            color: #f5f5f5;
        }
        
        .nav .content .item 
        {
           margin-left: 30px;
           margin-right: 10px;
        }
 
         .nav .content .item a
         {
            display: inline-block;
            width: 80px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            color: #f5f5f5;
            font-size: 12px;
         }
          

         .nav .content .item :hover
         {
             border-radius: 20px;
             background-color: #9B0909;
         }


    </style>
</head>

<body>
    <div class="top">
        <div class="topbar wrap1">
            <div class="left">
                <div class="logo">
                    <h1> <a href="#">
                            网易云音乐
                        </a></h1>
                </div>
                <div class="item item1 active"><a href="#">发现音乐</a></div>
                <div class="item item2"><a href="#">我的音乐</a></div>
                <div class="item item3"><a href="#">关注</a></div>
                <div class="item item4"><a href="#">商城</a></div>
                <div class="item item5"><a href="#">音乐人</a></div>
                <div class="item item6"><a href="#">云推歌</a></div>
                <div class="item item7"><a href="#">下载客户端</a></div>
            </div>
            <div class="right">
                <div class="search right-item">
                    <input class="input" type="text" placeholder="音乐/视频/电台/用户">
                    <img src="../image/搜索.png" alt="图片">
                </div>
                <div class="author right-item">
                    <a href="#"> 创作者中心</a>
                </div>
                <div class="login  right-item">
                    <a href="#"> 登录</a>
                </div>
            </div>
        </div>
    </div>
    <div class="nav">
         <div class="content">
          <div class="item item1"><a href="#">推荐</a></div>
          <div class="item "><a href="#">排行榜</a></div>
          <div class="item"><a href="#">歌单</a></div>
          <div class="item"><a href="#">主播电台</a></div>
          <div class="item"><a href="#">歌手</a></div>
          <div class="item"><a href="#">新碟上架</a></div>
         </div>
    </div>
</body>

</html>